<script>
import { provide } from 'vue'
import { useVModel } from '@vueuse/core'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    const changeTab = (name, index) => {
      // console.log('changeTab', val)
      // 实现双向绑定 v-model 值的更新
      // emit('update:modelValue', name)
      activeName.value = name
      // 自定义事件获取值
      emit('tab-click', { name, index })
    }

    // setup 代码只运行一次
    // const activeName = ref('')
    // watch(() => props.modelValue, (val) => {
    //   activeName.value = val
    // }, { immediate: true })
    // const activeName = computed(() => props.modelValue)
    const activeName = useVModel(props, 'modelValue', emit)
    provide('activeName', activeName)

    return { changeTab }
  },
  // 1. render 函数内返回的内容作为 template 的内容
  render () {
    // console.log(this)
    // 2. 通过 this.$slots.default() 获取默认插槽内容
    // 3. JSX 中通过 map 实现列表渲染
    // 4. 事件通过 @click   onClick
    const slot = this.$slots.default()
    // const slot = this.$slots.default()[0].children
    // console.log(this.$props.modelValue)
    // console.log(this.modelValue)
    // console.log(1111111111, slot)
    const arr = []
    slot.forEach(item => {
      // 插槽的节点是 XtxTabsPanel 的情况
      if (item.type.name === 'XtxTabsPanel') {
        arr.push(item)
      } else {
        // 通过 v-for 生成的清空，会在 children 中
        arr.push(...item.children)
      }
    })
    return (
      <div class="xtx-tabs">
        <nav>
          {arr.map((item, index) => (
            <a
              href="javascript:;"
              class={{ active: this.modelValue === item.props.name }}
              onClick={ () => this.changeTab(item.props.name, index) }
            >
              {item.props.label}
            </a>
          ))}
        </nav>
        {slot}
      </div>
    )
  }
}
</script>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
